<template>
	<view>
		<view style="padding-left: 43upx;padding-top: 22upx; text-align: center; background-color:#11CC99;height: 300upx;">
			<span style="font-size: 42upx;font-weight: 600;">{{title}}</span>
		</view>
		<view class="vmodul" style="margin-top: -180upx;">
			<view>
				<view class="cu-form-group" style="font-size: 46upx;font-weight: 550;">
					<span>任务单类型：</span>
					
					<text v-if="data.taskType==='xunjian'">巡检</text>
					<text v-if="data.taskType==='bidui'">比对</text>
					<text v-if="data.taskType==='weixiu'">维修</text>
					<text v-if="data.taskType==='qita'">其它</text>
				</view>
				<view class="cu-form-group">
					<view>实施人:</view>
					<text>{{data.shishirenName}}</text>
				</view>
				<view class="cu-form-group">
					<view>开始时间:</view>
					<text>{{data.createTime}}</text>
				</view>
				<view class="cu-form-group">
					<view>站点名称:</view>
					<text>{{data.siteName}}</text>
				</view>
				<view class="cu-form-group">
					<view style="white-space:nowrap;">详情:</view>
					<text>{{data.yunweiContent}}</text>
				</view>
				<view class="cu-form-group">
					<view>备注:</view>
					<text>{{data.yunweiBeizhu}}</text>
				</view>
				<view class="cu-form-group">
					<view>相关内容:</view>
					<text>{{data.siteName}}</text>
				</view>
				<view class="cu-form-group">
					<view class="flex-item-20">图片</view>
					<view class="flex-item-80">
						<image :src="data.tempPicture" @tap="_previewImage(data.tempPicture)" class="img"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="vmodul">
			<view class="cu-form-group" :class="showMessage1==false?'after-cuIcon-unfold':'after-cuIcon-fold'" id="pdh" @click="hiddenMessage($event)">
				<text class="person-msg-hidden">移交信息</text>
			</view>
			<view v-if="showMessage1" style="padding-left: 31upx;">
				<view class="cu-form-group" style="padding-left: 0px;">
					<view class="cuIcon-order" >移交人:</view>
					<text>{{data.transferMessage.tranferMan}}</text>
				</view>
				<view class="cu-form-group" style="margin-left: 20upx;">
					<view>转交人:</view>
					<text>{{data.transferMessage.transmitMan}}</text>
				</view>
				<view class="cu-form-group" style="margin-left: 20upx;">
					<view style="white-space:nowrap;">移交内容:</view>
					<text>{{data.transferMessage.transferContent}}</text>
				</view>
			</view>
		</view>
		<view class="vmodul">
			<view class="cu-form-group" :class="showMessage2==false?'after-cuIcon-unfold':'after-cuIcon-fold'" @click="hiddenMessage2" style="padding-left: 31upx;">
				<text class="person-msg-hidden">里程花费记录</text>
			</view>
			<view v-if="showMessage2" style="padding-left: 31upx;">
				<view class="cu-form-group" style="padding-left: 0px;" @click="hiddenMessage3" >
						<view class="cuIcon-moneybagfill">花费:</view>
						<view><text :class="showMessage3==true?'after-cuIcon-fold':'after-cuIcon-unfold'">{{data.mileageSpendRecord.spend}}</text></view>
				</view>
				<view v-if="showMessage3" >
					<view class="cu-form-group row" >
						<view>地铁:</view>
						<text>{{data.mileageSpendRecord.metroSpend}}</text>
					</view>
					<view class="cu-form-group row">
						<view>出租车:</view>
						<text>{{data.mileageSpendRecord.taxiSpend}}</text>
					</view>
				</view>
				
				<view class="cu-form-group "  style="padding-left: 0px;" @click="hiddenMessage4">
					<view class="cuIcon-timefill">里程:</view>
					<view><text :class="showMessage4==true?'after-cuIcon-fold':'after-cuIcon-unfold'">{{data.mileageSpendRecord.mileage}}</text></view>
				</view>
				<view v-if="showMessage4">
					<view class="cu-form-group row">
						<view>步行:</view>
						<text>{{data.mileageSpendRecord.walk}}</text>
					</view>
					<view class="cu-form-group row">
						<view>出租车:</view>
						<text>{{data.mileageSpendRecord.taxi}}</text>
					</view>
				</view>
			</view>
		</view> -->
		<view  v-for="(item,key) in opInfo" :key = "key" >
			<view class="vmodul">
					<view class="cu-form-group" style="font-size: 38upx;font-weight: 500;">
						<text class="">运维记录单</text>
					</view>
					<view>
						<view class="cu-form-group">
							<view class="reason">提交人</view>
							<text>{{item.tijiaorenName}}</text>
						</view>
						<view class="cu-form-group">
							<view class="reason">提交内容</view>
							<text>{{item.reason}}</text>
						</view>
						<!-- <view class="cu-form-group">
							<view class="reason">原因</view>
							<input class="" v-model="taskMan" type="text" placeholder="请输入" />
						</view>
						<view class="cu-form-group">
							<view class="reason">原因</view>
							<input class="" v-model="taskMan" type="text" placeholder="请输入" />
						</view>
						<view class="cu-form-group">
							<view class="reason">原因</view>
							<input class="" v-model="taskMan" type="text" placeholder="请输入" />
						</view>
						<view class="cu-form-group">
							<view class="reason">原因</view>
							<input class="" v-model="taskMan" type="text" placeholder="请输入" />
						</view> -->
						<hm-photo-card :options="item.pictureArr"></hm-photo-card>
						<!-- <view class="cu-form-group">
							<view  class="reason">图片凭证</view>
							<view>
								
							</view>
						</view> -->
					</view>
			</view>
		</view>
		
		</view>
</template>

<script>
	import hmPhotoCard from '@/components/hm-photo-card/index.vue';
	import Util from '@/utils/util.js';
	export default{
		data(){
			return{
				title:'运维记录详情',
				taskType:'',
				pictureUrl:'',
				data:{},
				// showMessage1:false,
				// showMessage2:false,
				// showMessage3:true,
				// showMessage4:true,
				opInfo:[],
				isPass: false,
				photes:[],
			}
		},
		components: {
			hmPhotoCard,
		},
		onLoad(e) {
			//依据任务单类型渲染界面（目前表一样，考虑后期不同类型表单会不一样）
			if(e.type){
				this.taskType = e.type
			}
			
			//根据任务单id查询相关信息
			if(e.id){
				//查询任务单
				Util.request('/monitor/taskInfo/get', {id:e.id}, 'GET').then(res=>{
					if(res.data.tempPicture){
						let pictureArr = res.data.tempPicture.split('upload')
						pictureArr = pictureArr[1].split('\\')
						res.data.tempPicture = "http://www.szsjml.top:8148/image/"+pictureArr[1]+"/"+pictureArr[2];
					}
					this.data=res.data
				}).catch(()=>{
					//联网失败, 结束加载
				})
				if(this.taskType === 'xunjian'){
					//查询运维单
					Util.request('/monitor/taskXunjian/getByTaskId', {taskId:e.id}, 'GET').then(res=>{
						
						res.data.map(item => {
							if(item.pictureArr){
								item.pictureArr.map(picture =>{
									if(picture.filePath){
										let pictureTemp = picture.filePath.split('upload')
										pictureTemp = pictureTemp[1].split('\\')
										picture.tempPicture = "http://www.szsjml.top:8148/image/"+pictureTemp[1]+"/"+pictureTemp[2];
									}
								})
							}
						});
						this.opInfo=res.data; //任务单数据
					}).catch(()=>{
						//联网失败, 结束加载
					})
				}else if(this.taskType === 'bidui'){
					//查询运维单
					Util.request('/monitor/taskBidui/getByTaskId', {taskId:e.id}, 'GET').then(res=>{
						res.data.map(item => {
							if(item.pictureArr){
								item.pictureArr.map(picture =>{
									if(picture.filePath){
										let pictureTemp = picture.filePath.split('upload')
										pictureTemp = pictureTemp[1].split('\\')
										picture.tempPicture = "http://www.szsjml.top:8148/image/"+pictureTemp[1]+"/"+pictureTemp[2];
									}
								})
							}
						});
						this.opInfo=res.data; //任务单数据
					}).catch(()=>{
						//联网失败, 结束加载
					})
				}else if(this.taskType === 'weixiu'){
					//查询运维单
					Util.request('/monitor/taskGuzhang/getByTaskId', {taskId:e.id}, 'GET').then(res=>{
						res.data.map(item => {
							if(item.pictureArr){
								item.pictureArr.map(picture =>{
									if(picture.filePath){
										let pictureTemp = picture.filePath.split('upload')
										pictureTemp = pictureTemp[1].split('\\')
										picture.tempPicture = "http://www.szsjml.top:8148/image/"+pictureTemp[1]+"/"+pictureTemp[2];
									}
								})
							}
						});
						this.opInfo=res.data; //任务单数据
					}).catch(()=>{
						//联网失败, 结束加载
					})
				}else if(this.taskType === 'qita'){
					//查询运维单
					Util.request('/monitor/taskQita/getByTaskId', {taskId:e.id}, 'GET').then(res=>{
						res.data.map(item => {
							if(item.pictureArr){
								item.pictureArr.map(picture =>{
									if(picture.filePath){
										let pictureTemp = picture.filePath.split('upload')
										pictureTemp = pictureTemp[1].split('\\')
										picture.tempPicture = "http://www.szsjml.top:8148/image/"+pictureTemp[1]+"/"+pictureTemp[2];
									}
									
								})
							}
						});
						console.info(this.opInfo)
						this.opInfo=res.data; //任务单数据
					}).catch(()=>{
						//联网失败, 结束加载
					})
				}
			}
		},
		mounted() {
		},
		methods:{
			_previewImage(image) {
				var imgArr = [];
				imgArr.push(image);
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			},
		}
	}
</script>

<style>
	.vmodul{
		display: flex;
		flex-direction:column;
		margin-left: 22upx;
		margin-right: 22upx;
		margin-top: 22upx;
		background-color: #FCFCFC;
		padding: 10upx 10upx 10upx 10upx;
		border-radius:22upx
	}
	.reason{
		padding: .4rem .5rem;
	}
	.cuIcon-order::before{
		color: white;
		border-radius: 50%;
		background-color: #53C8E7;
		margin-right: 20upx;
	}
	.cuIcon-moneybagfill::before{
		color: #F2D67A;
		margin-right: 20upx;
	}
	.cuIcon-timefill::before{
		color: #8BB2F3;
		margin-right: 20upx;
	}
	.after-cuIcon-fold::after {
		content: "\e6de";
		color:#008800;
		font-weight: 200;
		font-size: 40upx;
	}
	.after-cuIcon-unfold::after {
		content: "\e661";
		color:#008800;
		font-weight: 200;
		font-size: 40upx;
	}
	.row{
		margin-left: 20upx;
		margin-right: 34upx;
		font-family: "cuIcon";
	}
	.img {
	  border-radius: 29.22rpx;
	  width: 200.65rpx;
	  height: 200.65rpx;
	  overflow: hidden;
	}
</style>
